<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <title>Document</title>

</head>

<body>
    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">用户id</th>
                    <th scope="col">账号</th>
                    <th scope="col">密码</th>
                    <th scope="col">手机</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(() => {
        $.ajax({
            type: "get",
            url: "/user/all",
            dataType: "json",
            success: response => {
                let list = response.list;
                console.log(list);
                let html = list.map(ele => {
                    return `<tr>
                    <th scope="row">${ele.id}</th>
                    <td>${ele.username}</td>
                    <td>${ele.password}</td>
                    <td>${ele.email}</td>
                    <td><button type="submit" class="btn btn-danger">删除</button></td>
                    </tr>`
                }).join("");
                $("tbody").append(html);
                $(".btn-danger").click(function() {
                    if (window.confirm("确定要删除吗")) {
                        let id = $(this).parents("tr").children("th").text();
                        $.ajax({
                            type: "delete",
                            url: "/user/delete",
                            data: {
                                id,
                            },
                            dataType: "json",
                            success: response => {
                                if (response.msg == "删除成功")
                                    $(this).parents("tr").remove();
                            }
                        });
                    }
                })
            }
        });
    })
</script>

</html>